<template>
  <div id="daletouPage" class="view">
    <game-header></game-header>
    <game-nav></game-nav>
    <div class="content select">
      <div class="prompt">
        <span class="item">前区至少选择5个号码</span>
        <span class="item">后区至少选择2个号码</span>
      </div>
         <div class="flex">
           <div class="sec1">选择号码</div>
           <div class="sec2">
             <div class="item">
               <span class="round">1</span>
               <span class="round">2</span>
               <span class="round">3</span>
               <span class="round">4</span>
               <span class="round">5</span>
               <span class="round">6</span>
               <span class="round">7</span>
               <span class="round">8</span>
               <span class="round">9</span>
               <span class="round">10</span>
               <span class="round">11</span>
               <span class="round">12</span>
             </div>
             <div class="item">2</div>
             <div class="item">
               <span class="round">13</span>
               <span class="round">14</span>
               <span class="round">15</span>
               <span class="round">16</span>
               <span class="round">17</span>
               <span class="round">18</span>
               <span class="round">19</span>
               <span class="round">20</span>
               <span class="round">21</span>
               <span class="round">22</span>
               <span class="round">23</span>
               <span class="round">24</span>
             </div>
             <div class="item">4</div>
             <div class="item">
               <span class="round">25</span>
               <span class="round">26</span>
               <span class="round">27</span>
               <span class="round">28</span>
               <span class="round">29</span>
               <span class="round">30</span>
               <span class="round">31</span>
               <span class="round">32</span>
               <span class="round">33</span>
               <span class="round">34</span>
               <span class="round">35</span>

             </div>
             <div class="item">6</div>
           </div>
           <div class="sec3">
             <div class="item">
               <span class="round">1</span>
               <span class="round">2</span>
               <span class="round">3</span>
               <span class="round">4</span>
             </div>
             <div class="item">
               ww
             </div>
             <div class="item">
               <span class="round">5</span>
               <span class="round">6</span>
               <span class="round">7</span>
               <span class="round">8</span>
             </div>
             <div class="item">qq</div>
             <div class="item">
               <span class="round">9</span>
               <span class="round">10</span>
               <span class="round">11</span>
               <span class="round">12</span>
             </div>
             <div class="item">ee</div>
           </div>
         </div>

      <div class="bottom">
        总金额共0元  <el-button type="warning">添加投注</el-button>
      </div>

    </div>

  </div>
</template>

<script>
  import header from '../../gamesub/header.vue'
  import nav from '../../gamesub/nav.vue'
  export default {
    data () {
      return {
      }
    },
    created () {
  //
    },
    methods: {},
    components: {
      'game-header': header,
      'game-nav': nav
    }

  }
</script>

<style lang="less">
  #daletouPage {
    /*border:1px solid #ccc;*/
    .sec_top {
      .left {
        width: 58%;
        border-right: 1px solid #ccc;
        padding: 30px 0;

        .item1 {
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .item2 {
          padding-top: 15px;
          padding-left: 8px;
          width: 120px;
          text-align: left;
        }
        .item3 {
          flex: 1;
        }
      }
      .right {
        width: 42%;
      }
    }
    .type {
      height: 35px;
      line-height: 35px;
      background-color: #f13131;
    }
    .type1 {
      height: 60px;
      background-color: #e6e6e6;
    }
    .content {
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }

    .bottom{
      padding: 15px 70px;
      text-align: right;
      font-size: 14px;
    }
    .select .sec1{
      width: 70px;
    }
    .select .sec2{
      width: 440px;
    }
    .select .sec3{
      width: 180px;
      margin-left: 60px;
    }
    .select .sec4{
      width: 250px;
      height: 300px;
      border: 1px solid #ccc;
      float: right;
    }

    .select .round:hover{
      border: 1px solid #fd4f2d;
      transform: scale(1.3);
    }
    .bgRed{
      background: red;
    }
    .prompt{
      line-height: 50px;
      font-size: 16px;
    }
    .prompt .item:first-child{
      color: red;
    }
    .prompt .item:last-child{
      padding-left: 200px;
      color: green;
    }
  }
</style>
